<template>
    <el-upload :action="uploadData.host" :data="uploadData" :limit="maxSize" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" :on-exceed="onExceededSize"
        :accept="accept" :show-file-list="showUploadList" :format="format" :on-format-error="onFormatError" :on-progress="onProgress">
        <slot>
            <el-button class="blue-btn"><i class="iconfont  icon-download-file"></i> 选择文件</el-button>
        </slot>
    </el-upload>
</template>

<script>
import { defineComponent, watch, reactive, toRefs, onMounted} from 'vue';
import uploadOss from '@/lib/upload-oss.js'
const { getUploadToken, getFileKey } = uploadOss
export default defineComponent({
    name: 'upload-oss-file',
    props: {
        showUploadList: {
            type: Boolean,
            default: false
        },
        accept: {
            type: String,
            default:
                '.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        },
        ossTokenData: {
            type: Object,
            default() {
                return {
                    moduleType: 'tempfile',
                    publicRead: true
                }
            }
        },
        format: {
            type: Array,
            default() {
                return ['xls', 'xlsx']
            }
        },
        uploadBefore: {
            type: Function,
            default: function () {}
        },
        uploadSuccess: {
            type: Function,
            default: function () {}
        },
        uploadFail: {
            type: Function,
            default: function () {}
        },
        uploadExceededSize: {
            type: Function,
            default: function () {}
        },
        uploadFormatError: {
            type: Function,
            default: function () {}
        },
        uploadProgress: {
            type: Function,
            default: function () {}
        },
        maxSize: {
            type: Number,
            default: 5120 // 默认限制5M，单位k
        },
        type: {
            type: String,
            default: 'select'
        }
    },
    setup(props, ctx){
        const state = reactive({
            uploadData: {
                host: ''
            },
            file: null
        })
        const methods = {
            beforeUpload(file) {
                props.uploadBefore(file)
                state.file = file || null
                state.uploadData.key = getFileKey(
                    state.uploadData.path,
                    state.uploadData.signature,
                    file.name
                )
            },
            onSuccess() {
                const url = state.uploadData.host + '/' + state.uploadData.key
                props.uploadSuccess(url, state.file)
            },
            onError() {
                props.uploadFail()
            },
            onExceededSize(file, fileList) {
                props.uploadExceededSize(file, fileList)
            },
            onFormatError() {
                props.uploadFormatError()
            },
            onProgress(event, file, fileList) {
                props.uploadProgress(event, file, fileList)
            }
        }
        onMounted(() => {
            getUploadToken(props.ossTokenData).then((res) => {
                const uploadData = res.data
                uploadData.OSSAccessKeyId = uploadData.accessKeyId
                state.uploadData = uploadData
                console.log(uploadData, 'uploadData')
            })
        })
        return {
            ...toRefs(state),
            ...methods
        }
    }
    
    // mounted() {
    //     getUploadToken(this.ossTokenData, this).then((res) => {
    //         const uploadData = res.data
    //         uploadData.OSSAccessKeyId = uploadData.accessKeyId
    //         this.uploadData = uploadData
    //         console.log(uploadData)
    //     })
    // },
    // install(Vue) {
    //     Vue.component('upload-image', UploadImage)
    // }
})
// export default UploadImage
</script>

<style lang="scss">
.icon-download-file:before {
    margin-right: 10px;
}
</style>
